<template>
	<view class="register-form-container">
		<!-- 头部 -->
		<view class="header">
			<view class="back-btn" @tap="goBack">
				<image class="back-icon" src="/static/icons/arrow_left.png"></image>
			</view>
			<text class="page-title">完善注册信息</text>
		</view>
		
		<!-- 注册表单 -->
		<scroll-view scroll-y class="form-scroll">
			<view class="glass-effect">
				<view class="form-item">
					<text class="form-label">手机号码</text>
					<view class="input-container">
						<image class="input-icon" src="/static/icons/phone.png"></image>
						<input class="form-input" type="number" v-model="formData.phone" placeholder="请输入手机号码" maxlength="11"/>
					</view>
				</view>
				
				<!-- <view class="form-item code-form-item">
					<text class="form-label">验证码</text>
					<view class="code-input-container">
						<view class="input-container">
							<image class="input-icon" src="/static/icons/verify.png"></image>
							<input class="form-input" type="number" v-model="formData.code" placeholder="请输入验证码" maxlength="6"/>
						</view>
						<button class="code-btn" @tap="getVerifyCode" :disabled="countdown > 0">
							{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
						</button>
					</view>
				</view> -->
				
				<view class="form-item">
					<text class="form-label">设置密码</text>
					<view class="input-container">
						<image class="input-icon" src="/static/icons/lock.png"></image>
						<input class="form-input" type="password" v-model="formData.password" placeholder="请设置登录密码"/>
					</view>
				</view>
				
				<view class="form-item">
					<text class="form-label">确认密码</text>
					<view class="input-container">
						<image class="input-icon" src="/static/icons/lock.png"></image>
						<input class="form-input" type="password" v-model="formData.confirmPassword" placeholder="请再次输入密码"/>
					</view>
				</view>
				
				<!-- 企业会员特有表单项 -->
				<block v-if="memberType === 'enterprise'">
					<view class="form-item">
						<text class="form-label">企业名称</text>
						<view class="input-container">
							<image class="input-icon" src="/static/icons/building.png"></image>
							<input class="form-input" type="text" v-model="formData.companyName" placeholder="请输入企业名称"/>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">统一社会信用代码</text>
						<view class="input-container">
							<image class="input-icon" src="/static/icons/id-card.png"></image>
							<input class="form-input" type="text" v-model="formData.idCardNo" placeholder="请输入统一社会信用代码"/>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">企业联系人</text>
						<view class="input-container">
							<image class="input-icon" src="/static/icons/user.png"></image>
							<input class="form-input" type="text" v-model="formData.contactPerson" placeholder="请输入企业联系人姓名"/>
						</view>
					</view>
				</block>
				
				<!-- 个人会员特有表单项 -->
				<block v-if="memberType === 'personal'">
					<view class="form-item">
						<text class="form-label">姓名</text>
						<view class="input-container">
							<image class="input-icon" src="/static/icons/user.png"></image>
							<input class="form-input" type="text" v-model="formData.realName" placeholder="请输入真实姓名"/>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">身份证号</text>
						<view class="input-container">
							<image class="input-icon" src="/static/icons/id-card.png"></image>
							<input class="form-input" type="text" v-model="formData.idCardNo" placeholder="请输入身份证号码"/>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">专业领域</text>
						<view class="input-container">
							<image class="input-icon" src="/static/icons/tag.png"></image>
							<picker class="form-picker" mode="selector" :range="professionList" @change="handleProfessionChange">
								<view class="picker-value">{{ formData.profession || '请选择专业领域' }}</view>
							</picker>
							<image class="dropdown-icon" src="/static/icons/dropdown.png"></image>
						</view>
					</view>
				</block>
				
				<view class="agreement">
					<checkbox :checked="formData.agreeTerms" @tap="formData.agreeTerms = !formData.agreeTerms" style="transform:scale(0.7)"/>
					<text class="agreement-text">
						我已阅读并同意
						<text class="link" @tap="showTerms">《服务条款》</text>
						和
						<text class="link" @tap="showPrivacy">《隐私政策》</text>
					</text>
				</view>
				
				<button class="register-btn" @tap="handleRegister()">注册</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberType: '',
				countdown: 0,
				professionList: ['工程建筑', '电气设备', '机械设备', 'IT服务', '咨询服务', '其他'],
				formData: {
					phone: '',
					code: '',
					password: '',
					confirmPassword: '',
					companyName: '',//公司名
					creditCode: '',
					contactPerson: '',//企业联系人
					realName: '',//真实姓名
					idCardNo: '',//身份证号或者企业信用代码
					profession: '',//专业
					agreeTerms: false
				}
			}
		},
		onLoad(options) {
			// 获取会员类型参数
			this.memberType = options.type || '';
			console.log("注册类型：",this.memberType)
			if (!this.memberType) {
				uni.showToast({
					title: '缺少注册类型参数',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getVerifyCode() {
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				}
				if (!/^1\d{10}$/.test(this.formData.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					});
					return;
				}
				
				// 模拟发送验证码
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
				
				// 开始倒计时
				this.countdown = 60;
				const timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(timer);
					}
				}, 1000);
			},
			handleProfessionChange(e) {
				const index = e.detail.value;
				this.formData.profession = this.professionList[index];
			},
			showTerms() {
				uni.showToast({
					title: '服务条款功能开发中',
					icon: 'none'
				});
			},
			showPrivacy() {
				uni.showToast({
					title: '隐私政策功能开发中',
					icon: 'none'
				});
			},
			validateForm() {
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return false;
				}
				if (!/^1\d{10}$/.test(this.formData.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					});
					return false;
				}
				// if (!this.formData.code) {
				// 	uni.showToast({
				// 		title: '请输入验证码',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				if (!this.formData.password) {
					uni.showToast({
						title: '请设置登录密码',
						icon: 'none'
					});
					return false;
				}
				if (this.formData.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					});
					return false;
				}
				if (this.formData.password !== this.formData.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return false;
				}
				
				// 企业会员特有验证
				if (this.memberType === 'enterprise') {
					if (!this.formData.companyName) {
						uni.showToast({
							title: '请输入企业名称',
							icon: 'none'
						});
						return false;
					}
					if (!this.formData.idCardNo) {
						uni.showToast({
							title: '请输入统一社会信用代码',
							icon: 'none'
						});
						return false;
					}
					if (!this.formData.contactPerson) {
						uni.showToast({
							title: '请输入企业联系人',
							icon: 'none'
						});
						return false;
					}
				}
				
				// 个人会员特有验证
				if (this.memberType === 'personal') {
					if (!this.formData.realName) {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none'
						});
						return false;
					}
					if (!this.formData.idCardNo) {
						uni.showToast({
							title: '请输入身份证号码',
							icon: 'none'
						});
						return false;
					}
					if (!this.formData.profession) {
						uni.showToast({
							title: '请选择专业领域',
							icon: 'none'
						});
						return false;
					}
				}
				
				if (!this.formData.agreeTerms) {
					uni.showToast({
						title: '请阅读并同意服务条款和隐私政策',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			handleRegister() {
				if (!this.validateForm()) {
					return;
				}
				if(this.memberType == 'personal'){
					console.log("个人用户注册")
					// uni.showLoading({
					// 	title: '注册中...'
					// });
				 uni.request({
				 	url:'http://115.190.38.218/go/api/v1/auth/register/usr',
				 	data:{
						password:this.formData.password,
						phone:this.formData.phone,
						major:this.formData.profession,
						name:this.formData.realName,
						id_card:this.formData.idCardNo,
						credit_code:'1000'//个人用户
					},
				 	method:'POST',
				 	success:function(res){
				 		console.log("注册成功！",res)
						if(res.data.message == 'User registered successfully'){
							// uni.hideLoading();
							
							// 	// 注册成功提示
								uni.showToast({
									title: '注册成功',
									icon: 'success'
								});
										uni.navigateTo({
											url: '/pages/login/login'
										});
								
						}
				 	},
				 	fail:function(err){
				 		console.log("注册失败！",err)
				 	}
				 })
				}else{
					console.log("企业用户注册")
										// uni.showLoading({
										// 	title: '注册中...'
										// });
					uni.request({
						url:'http://115.190.38.218/go/api/v1/auth/register/usr',
						data:{
											password:this.formData.password,
											phone:this.formData.phone,
											conn_usr:this.formData.contactPerson,//企业联系人
											company_name:this.formData.companyName,
											id_card:this.formData.idCardNo,
											credit_code:'2000'//个人用户
										},
						method:'POST',
						success:function(res){
							console.log("注册成功！",res)
											if(res.data.message == 'User registered successfully'){
												// uni.hideLoading();
												
												// 	// 注册成功提示
													uni.showToast({
														title: '注册成功',
														icon: 'success'
													});
															uni.navigateTo({
																url: '/pages/login/login'
															});
													
											}else{
												uni.showToast({
													title:'注册失败',
													icon:'error',
													
												})
											}
						},
						fail:function(err){
							console.log("注册失败！",err)
						}
					})
				}
				// 调用注册接口
				
				
				// 模拟请求
				
				//换真实请求
				// setTimeout(() => {
				// 	uni.hideLoading();
					
				// 	// 存储登录状态
				// 	uni.setStorageSync('token', 'mock-token');
				// 	uni.setStorageSync('userInfo', {
				// 		id: new Date().getTime(),
				// 		username: this.formData.phone,
				// 		avatar: '/static/images/avatar.png',
				// 		type: this.memberType,
				// 		companyName: this.memberType === 'enterprise' ? this.formData.companyName : '',
				// 		realName: this.memberType === 'personal' ? this.formData.realName : this.formData.contactPerson
				// 	});
					
			
					
				// 	// 跳转到首页
				// 	setTimeout(() => {
				
				// 	}, 1500);
				// }, 2000);
			}
		}
	}
</script>

<style scoped>
	.register-form-container {
		
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-image: linear-gradient(to bottom right, #3b82f6, #8b5cf6);
	}
	
	.header {
		padding: 60rpx 40rpx 30rpx;
		display: flex;
		align-items: center;
	}
	
	.back-btn {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
	}
	
	.form-scroll {
		flex: 1;
		padding: 0 40rpx 40rpx;
	}
	
	.glass-effect {
		backdrop-filter: blur(10px);
		background-color: rgba(255, 255, 255, 0.7);
		border: 1px solid rgba(255, 255, 255, 0.18);
		box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.05);
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
		width: 600rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.input-container {
		position: relative;
	}
	
	.input-icon {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
	}
	
	.form-input {
		background-color: rgba(255, 255, 255, 0.7);
		border: 1px solid #e0e0e0;
		border-radius: 12rpx;
		height: 90rpx;
		padding-left: 70rpx;
		font-size: 28rpx;
		
	}
	
	.code-form-item .code-input-container {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.code-input-container .input-container {
		flex: 1;
	}
	
	.code-btn {
		width: 240rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 26rpx;
		background-color: #3b82f6;
		color: #fff;
		border-radius: 12rpx;
		padding: 0;
	}
	
	.code-btn[disabled] {
		background-color: #a0aec0;
	}
	
	.form-picker {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
	}
	
	.picker-value {
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 70rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.dropdown-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 36rpx;
		height: 36rpx;
	}
	
	.agreement {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	.agreement-text {
		font-size: 26rpx;
		color: #666;
	}
	
	.link {
		color: #3b82f6;
	}
	
	.register-btn {
		background-color: #3b82f6;
		color: #fff;
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
	}
</style> 